<template>
    <div>
        <ul class="hall-component-list">
            <li class="hall-component-item" v-for=" list in historyComment">
                <div class="hall-component-face">
                    <img v-lazy="list.hdurl"/>
                </div>
                <div class="hall-component-info">
                    <div class="hall-component-title">
                        <p class="hall-component-time"> {{list.sendtime}}</p>
                        <p class="hall-component-name"> {{list.sender.nickname}}</p>
                    </div>
                    <div class="hall-component-content">
                        {{list.content}}
                        <div v-for="alist in list.accessories">
                            <div class="hall-component-content-pic" v-if="alist.type=='picture2'">
                                <ul>
                                    <li v-for="(plist,index) in alist.thumbUrls"
                                        :class="'img hall-pic-'+list.accessories.length+' imgn_'+index">
                                        <img v-lazy="plist+'?cmd=imageprocess/processtype/2/quality/100/width/400'"
                                             @click="clickImg(plist)"/>

                                    </li>
                                </ul>
                            </div>

                            <audio v-if="alist.type=='audio2'" :src="getFirstUrl(alist.url)" height="100%" width="100%"
                                   controls="controls">
                                您的浏览器不支持 audio 标签。
                            </audio>
                            <video v-if="alist.type=='videomessage2'" v-bind:src="getFirstUrl(alist.url)"
                                   v-bind:poster="alist.thumbUrls[0]"
                                   controls="controls" height="100%" width="100%"></video>
                        </div>
                    </div>


                </div>
                <div class="clearBoth"></div>
            </li>

        </ul>
        <div class="hall-add-more" @click="getmorehall" v-show="addmore"> 加载更多</div>
    </div>
</template>

<script>
    import Json2 from "../../public/webim/json2.js"
    import Webim from "../../public/webim/webim.js"
    import Webimjssdk from "../../public/webim/webimjsdk.js"
export default {
  props: {
    topicid: {
      type: String,
      default: ""
    }
  },
    components: {
        //现网测试网均需要使用
        //ButelWebim,
        //现网环境使用
        // ButelWebimHTTPS

    },
  data: function() {
    return {
      addmore: true,
      historyComment: [],
      msghisArrayTmp: [],
      imEndTime: 0,
      appkey: "",// 新评论系统的appkey
      appsecret: "",// 新评论系统的企业秘钥
      paasImServerUrl: "",// 新评论系统地址
    };
  },
  mounted: function() {
    this.gethalls(this.topicid);
  },
  methods: {
    gethalls: function(topicId) {
      let that = this;
      // topicId = "5b9233d48a3b951720186b29";// 测试用
      // 获取设置参数
      function getImParam() {
          that.axios.get(  interbaseUrl + 'setsail/external/externalService?service=getcommnetsys')
            .then(response => {
                if (response.data.state == 1000) {
                    that.appkey = response.data.data.appkey;
                    that.appsecret = response.data.data.appsecret;
                    that.paasImServerUrl = response.data.data.paasImServerUrl;
                    PaaSWebIM.setOptions({
                        paasimHost: that.paasImServerUrl,
                        appkey: that.appkey,
                        appsecret: that.appsecret
                    });
                    imLogin();
                }
            });
      }

      // 登录群组
      function imLogin() {
        var imUserInfo = {};
        //注意每个数字代表的含义，比如，
        //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息等
        var onGroupSystemNotifys = {};

        var imListeners = {
            "jsonpCallback": jsonpCallback, //IE9(含)以下浏览器用到的jsonp回调函数,移动端可不填，pc端必填
            "onBigGroupMsgNotify": onBigGroupMsgNotify, //监听新消息(大群)事件，必填
            "onMsgNotify": onMsgNotify,//监听新消息(私聊(包括普通消息和全员推送消息)，普通群(非直播聊天室)消息)事件，必填
            "onGroupSystemNotifys": onGroupSystemNotifys, //监听（多终端同步）群系统消息事件，必填
        }
        //登录IM 获取实时消息
        var imOptions = {
            'isAccessFormalEnv': true,//是否访问正式环境，默认访问正式，选填
            'isLogOn': true//是否开启控制台打印日志,默认开启，选填
        };
        PaaSWebIM.login(imUserInfo, imListeners, imOptions, loginOK, loginErr);
      }
      function jsonpCallback(rspData) {
        //设置接口返回的数据
        PaaSWebIM.setJsonpLastRspData(rspData);
      }
      // 监听大群消息
      function onBigGroupMsgNotify(msgList) {
        if (!msgList || msgList.length == 0) {
        console.info(msgList);
        return;
        }
        for (var i = 0; i < msgList.length; i++) {
          var msg = msgList[i];
          var elems = msg.elems;
          if (elems && elems.length > 0) {
              for (var j = 0; j < elems.length; j++) {
                  var data = elems[j].content.data;
                  var value = JSON.parse(data);
                  var hdurl = '';
                  try {
                      if (value.sender.extinfo) {
                          var extra_info = JSON.parse(value.sender.extinfo);
                          hdurl = extra_info['hdurl'];
                      }
                  } catch (e) {
                      console.log(e);
                  }
                  value.hdurl = hdurl;
                  if (value.accessories && value.accessories.length > 0) {
                    for (var j = 0; j < value.accessories.length; j++) {
                        var attach = value.accessories[j];
                        if (attach.type == "picture2") {
                          attach.thumbUrls = [];
                          if (attach.url != undefined && attach.url != "") {
                            attach.thumbUrls.push(attach.url);
                          }
                        } else if (attach.type == "videomessage2") {
                          
                        } else if (attach.type == "audio2") {
                          
                        }
                    }
                  }
                  var ar = that.msghisArrayTmp.find(function (v) {
                    return v == value.msgid;
                  });
                  if(ar==undefined){
                      //加入临时数组，解决切换群组后，实时消息会收到推送最后一次发送的消息
                      that.msghisArrayTmp.push(value.msgid);
                      that.historyComment.unshift(value);
                      console.log(value);
                  }
              }
          }
        }
      }
      function onMsgNotify(newMsgList) {}
      // 新评论系统登录成功加入群组
      function loginOK() {
        console.log("登录成功");
        PaaSWebIM.applyJoinBigGroup(topicId, joinBigGroupOK, joinBigGroupErr);
      }
      function loginErr(data) {
        console.log("登录失败");
      }
      // 加入大群成功后获取历史消息
      function joinBigGroupOK(data) {
        console.log("加入大群成功");
        //获取历史消息
        var getMessageParams = {
        "topicid": topicId,
        "pagesize": 20,
        "ascsort": false
        }
        PaaSWebIM.butelPaasGetHismessage(getMessageParams, that.appkey, that.appsecret, that.onSuccgetPaasHistoryMsg, that.onFailgetPaasHistoryMsg);
      }
      function joinBigGroupErr(data) {
        console.log("加入大群失败");
      }

      getImParam();

    },
    //获取历史消息成功回调
    onSuccgetPaasHistoryMsg(data) {
      let that = this;
      console.log('获取历史消息成功');
      if (data.pagingrows.rows.length > 0) {
        that.imEndTime = data.pagingrows.rows[data.pagingrows.rows.length-1].timestamp;
        for(var i=0;i<data.pagingrows.rows.length;i++) {
            var value = data.pagingrows.rows[i];
            var hdurl = '';
            try {
              if (value.sender.extinfo) {
                  var extra_info = JSON.parse(value.sender.extinfo);
                  hdurl = extra_info['hdurl'];
              }
            } catch (e) {
              console.log(e);
            }
            value.hdurl = hdurl;
            
            if (value.accessories.length > 0) {
              for (var j = 0; j < value.accessories.length; j++) {
                  var attach = value.accessories[j];
                  if (attach.type == "picture2") {
                    attach.thumbUrls = [];
                    if (attach.url != undefined && attach.url != "") {
                      attach.thumbUrls.push(attach.url);
                    }
                  } else if (attach.type == "videomessage2") {
                    
                  } else if (attach.type == "audio2") {
                    
                  }
              }
            }
            var ar = that.msghisArrayTmp.find(function (v) {
              return v == value.msgid;
            });
            if (ar == undefined) {
                that.historyComment.push(value);
                that.msghisArrayTmp.push(value.msgid);
                console.log(value);
            }
        }
      } else {
        that.addmore = false;
      }
    },
    onFailgetPaasHistoryMsg(data) {
       console.log('获取历史消息失败');
    },
    getmorehall: function() {
      let topic = "5b9233d48a3b951720186b29";
      let that = this;
      var getMessageParams = {
        "topicid": topic,
        "pagesize": 20,
        "ascsort": false
      }
      if (that.imEndTime != 0) {
        getMessageParams.time = that.imEndTime;
      }
      PaaSWebIM.butelPaasGetHismessage(getMessageParams, that.appkey, that.appsecret, that.onSuccgetPaasHistoryMsg, that.onFailgetPaasHistoryMsg);
    }
  }
};
</script>

<style>
.hall-component-list a,
.hall-component-list a:link,
.hall-component-list a:visited {
  color: #459af5;
  text-decoration: none;
}

.hall-component-list {
  padding: 0 0.4rem;
  margin: 0 auto;
}

.hall-component-item {
  margin: 1rem auto;
}

.hall-component-face {
  width: 13%;
  float: left;
}

.hall-component-face img {
  width: 2.4rem;
    height: 2.4rem;
    object-fit: cover;
  border-radius: 50%;
}

.hall-component-info {
    width: 100%;
}

.hall-component-content {
  line-height: 1.8rem;
}

.hall-component-title {
  line-height: 1.2rem;
  height: 2.4rem;
}

.hall-component-title {
  font-size: 0.9rem;
  color: #999999;
}

.hall-component-content {
  font-size: 1.0rem;
  color: #666666;
}

.hall-component-time {
  margin: 0;
}

.hall-component-name {
  margin: 0;
  color: #459af5;
}

.hall-component-content-pic {
  width: 100%;
}

.hall-component-content-pic ul {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.hall-component-content-pic ul li {
  list-style: none;
  float: left;
  display: inline-block;
}

.hall-component-content-pic .img {
  width: 32.333%;
  margin: 2px 0.5%;
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 32.333%;
}

.hall-component-content-pic .img.hall-pic-1 {
  width: 100%;
  margin: 0;
  padding-bottom: 60%;
}

.hall-component-content-pic .img.hall-pic-2,
.hall-component-content-pic .img.hall-pic-4,
.hall-component-content-pic .img.hall-pic-5.imgn_0,
.hall-component-content-pic .img.hall-pic-5.imgn_1 {
  width: 49%;
  margin: 2px 0.5%;
  padding-bottom: 49%;
}

.hall-component-content-pic .img.hall-pic-3,
.hall-component-content-pic .img.hall-pic-6 {
  width: 32.333%;
  margin: 2px 0.5%;
  padding-bottom: 32.333%;
}

.hall-component-content-pic .img.hall-pic-5 {
  width: 32.333%;
  margin: 2px 0.5%;
  padding-bottom: 32.333%;
}

.hall-component-content-pic .img img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.hall-add-more {
  color: #666666;
  text-align: center;
  font-size: 15px;
  margin-top: 25px;
  margin-bottom: 10px;
}
</style>